<template>
  <div class="detail">
    <p class="title">{{infroList.title}}</p>
    <div class="tips">
      <p>创作者：{{creatorName}}</p>
      <p>上传时间：{{infroList.create_date}}</p>
      <p v-if="infroList.module == 1">阅读：{{infroList.viewNum}}</p>
      <p v-if="infroList.module == 2"><i class="el-icon-video-play"></i>{{infroList.viewNum}}</p>
    </div>
    <el-divider></el-divider>
    <div class="videoWrap">
      <img class="pic" :src="infroList.cover" alt="" v-if="infroList.module == 1"/>
      <video-player  class="video-player vjs-custom-skin" ref="videoPlayer" v-if="infroList.module == 2"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)">
      </video-player>
    </div>
    <!-- <p class="infro-tit">视频详情</p>
    <div class="infro-creator">
      <p>创作者：</p>
      <p>{{creatorName}}</p>
    </div>
    <div class="infro-creator">
      <p>上传时间：</p>
      <p>{{infroList.create_date}}</p>
    </div>
    <div class="infro-creator">
      <p>视频标题：</p>
      <p>{{infroList.title}}</p>
    </div> -->
    <el-divider></el-divider>
    <p class="infro-tit" v-if="infroList.module == 1">文章议题</p>
    <p class="infro-tit" v-if="infroList.module == 2">视频议题</p>
    <div v-html="infroList.paragraph"></div>
  </div>
</template>

<script>
import {getGuideAdd,getActicleDetail} from './../../../api/guide';
export default {
  data() {
    return {
      id:'',
      infroList:'',
      creatorName:'',
      // 视频
      playerOptions : {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '15:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [],
        poster: "", // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
        timeDivider: true, // 时间分割线
        durationDisplay: true, // 总时间
        remainingTimeDisplay: true, // 剩余播放时间
        progressControl: true, // 进度条 
        fullscreenToggle: true  // 全屏按钮
        }
      },

    }
  },
  created(){
    this.id = this.$route.query.id;
    let readParams = {
      businessId:this.id,
      type:1
    }
    // 阅读量
    getGuideAdd(readParams).then(res=>{
      // console.log(res);
    })
    getActicleDetail(this.id).then(res=>{
      console.log(res,'22222');
      if(res.code == 200){
        this.infroList = res.result;
        console.log( this.infroList)
        this.infroList.create_date = this.format(this.infroList.create_date);
        this.creatorName = this.infroList.user.creatorName;
        this.playerOptions.poster = this.infroList.cover;
        const video = {
          src:this.infroList.video,  // 路径
          type: ''  // 类型
        };
        this.playerOptions.sources.push(video);
      }
    })

  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  methods:{
    // 播放回调
    onPlayerPlay(player) {
      // console.log("player play!", player);
    },
    // 暂停回调
    onPlayerPause(player) {
      // console.log("player pause!", player);
    },
    // 转换时间戳为日期格式方法
    add(m) {
      return m < 10 ? "0" + m : m;
    },
    format(creatTime) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(creatTime);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add(m) +
        "-" +
        this.add(d) +
        " " +
        this.add(h) +
        ":" +
        this.add(mm) +
        ":" +
        this.add(s)
      );
    },
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.detail{
    width: 62.5%;
    height: 100%;
    display: table;
    background: #fff;
    padding: 30px 6% 40px;
    border-radius: 10px;
    margin: 10px auto 30px;
    font-size: 15px;
    .title{
      font-size: 30px;
      font-weight: 600;
      color: #191A24;
      line-height: 42px;
      margin-bottom: 10px;
      text-align: center;
    }
    .tips{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 17px;
      p{
        margin-right: 20px;
      }
    }
    .videoWrap{
      width: 100%;
      margin: 20px 0;
      .pic{
        width: 100%;
        height: 500px;
        display: block;
      }
      /deep/ video{
        object-fit: fill; // 消除播放器两边的黑色留白 （object-fit 知识详见下文拓展部分）
      }
      /deep/.video-js .vjs-big-play-button{
        border-width: 3px;
        border-color: rgb(255, 255, 255);
        border-style: solid;
        border-radius: 50%;
        width: 65px;
        height: 56px;
        line-height: 50px;
        background-color: rgba(0,0,0,0);
        position: absolute;
        top: 50%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      /* 滚动条的样式 */
      /deep/.video-js .vjs-control-bar{
        background-color: rgba(43, 51, 63, 0);
      }
      /deep/.video-js .vjs-play-progress{
        background-color: rgb(238,191,0);
      }
      /deep/.video-js .vjs-load-progress div{
        background-color: rgb(255, 255, 255);
      }
      /deep/.vjs-poster{
        background-size: 100% 100%;
      }
    }
    .infro-tit{
      font-size: 23px;
      font-weight: bold;
      line-height: 40px;
    }
    .infro-creator{
      display: flex;
      line-height: 32px; 
      margin: 10px 0;
      // color: #acacac;
      p:first-child{
        font-weight: bold;
        color: #000;
      }
    }
}
</style>